<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{shared/header(Mytitle='修改密码')}"/>
<body class="min-h-screen bg-gray-200">
<nav th:replace="~{shared/nav}" />

<div th:replace="~{shared/modal}" />

<div class="flex-grow flex items-center justify-center py-2 h-screen">
  <div class="bg-white p-8 rounded shadow-md w-96">
    <h2 class="text-2xl font-bold mb-4">修改</h2>
    <form id="mod">
      <div class="mb-4">
        <label for="originpwd" class="block text-gray-700 text-sm font-bold mb-2">原密码:</label>
        <input type="password" id="originpwd" maxlength="15"
               class="w-full p-2 border rounded focus:outline-none focus:border-blue-500
                        {{ isSuccess ? 'border-green-500' : '' }}">
        <span id="originpwd-char-count" class="text-sm text-gray-500">0 / 15</span>
      </div>
      <div class="mb-4">
        <label for="newpwd" class="block text-gray-700 text-sm font-bold mb-2">密码:</label>
        <input type="password" id="newpwd" maxlength="15"
               class="w-full p-2 border rounded focus:outline-none focus:border-blue-500
                        {{ isError ? 'border-red-500' : '' }}">
        <span id="newpwd-char-count" class="text-sm text-gray-500">0 / 15</span>
      </div>
      <div class="mb-4">
        <label for="ensurepwd" class="block text-gray-700 text-sm font-bold mb-2">密码:</label>
        <input type="password" id="ensurepwd" maxlength="15"
               class="w-full p-2 border rounded focus:outline-none focus:border-blue-500
                        {{ isError ? 'border-red-500' : '' }}">
        <span id="ensurepwd-char-count" class="text-sm text-gray-500">0 / 15</span>
      </div>
      <div class="flex flex=col justify-between gap-2">
        <button type="button" onclick="window.history.back()"
                class="w-full bg-gray-500 text-white p-2 rounded hover:bg-gray-600 focus:outline-none focus:shadow-outline-blue">
          返回
        </button>
        <button type="submit"
                class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue">
          修改
        </button>
      </div>
    </form>
  </div>
</div>

<footer th:replace="~{/shared/footer}" />
</body>
</html>
<script th:inline="javascript">
  $('#originpwd').on('blur', event => removeErrorClasses(event));
  $('#newpwd').on('blur', event => removeErrorClasses(event));
  $('#ensurepwd').on('blur', event => removeErrorClasses(event))
  $('#originpwd').on('input', handleInputWithLimit('originpwd', 15));
  $('#newpwd').on('input', handleInputWithLimit('newpwd', 15));
  $('#ensurepwd').on('input', handleInputWithLimit('ensurepwd', 15));
  $('#mod').submit(event => {
    event.preventDefault();
    const originPwd = $('#originpwd').val().trim();
    const newPwd = $('#newpwd').val().trim();
    const ensurePwd = $('#ensurepwd').val().trim()
    if (originPwd === '' || newPwd === '' || ensurePwd === '') {
      showModal('错误', '密码不能为空');
      addErrorClasses();
      return;
    } else if(originPwd == newPwd){
      showModal('错误','不能修改相同的密码')
      addErrorClasses()
      return ;
    } else if(newPwd != ensurePwd) {
      showModal('错误','两次密码输入不一致')
      addErrorClasses()
      return ;
    }
    $.ajax({
      type: 'POST',
      url: `${WebPrefix}/user/changepwd`,
      data: {
        account: originPwd,
        password: newPwd
      },
      success: function (response) {
        if (response.result) {
          toHome()
        } else {
          showModal('错误', response.message)
          addErrorClasses()
        }
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  })

  function handleInputWithLimit(elementId, maxLength) {
    const $element = $(`#${elementId}`);
    const $charCount = $(`#${elementId}-char-count`);

    $element.on('input', function (event) {
      const currentLength = $element.val().length;
      const remaining = maxLength - currentLength;

      $charCount.text(currentLength + ' / ' + maxLength);

      if (remaining < 0) {
        $element.val($element.val().substr(0, maxLength));
        $charCount.addClass('text-red-500');
      } else {
        $charCount.removeClass('text-red-500');
      }
    });
  }

  function removeErrorClasses(event) {
    $(event.target).removeClass('border-red-500');
  }

  function addErrorClasses() {
    $('#originpwd').addClass('border-red-500');
    $('#newpwd').addClass('border-red-500');
    $('#ensurepwd').addClass('border-red-500');
  }
</script>